import React, { useEffect, useState } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import Home from '../../views/sandbox/home/Home'
import UserList from '../../views/sandbox/user-manage/UserList'
import RoleList from '../../views/sandbox/right-manage/RoleList';
import RightList from '../../views/sandbox/right-manage/RightList'
import NewsAdd from '../../views/sandbox/news-manage/NewsAdd'
import NewsDraft from '../../views/sandbox/news-manage/NewsDraft'
import NewsCategory from '../../views/sandbox/news-manage/NewsCategory'
import NewsPreview from '../news-manage/NewsPreview';
import NewsUpdate from '../news-manage/NewUpdate';
import Audit from '../../views/sandbox/audit-manage/Audit'
import AuditList from '../../views/sandbox/audit-manage/AuditList'
import Unpublished from '../../views/sandbox/publish-manage/Unplished'
import Published from '../../views/sandbox/publish-manage/Published'
import Sunset from '../../views/sandbox/publish-manage//Sunset'
import NoPermission from '../../views/sandbox/nopermission/NoPermission'
import axios from 'axios';
import { Spin } from 'antd';
import { connect } from 'react-redux';


const LocalRouterMap = {
    "/home": Home,
    '/user-manage/list': UserList,
    '/right-manage/role/list': RoleList,
    '/right-manage/right/list': RightList,
    '/news-manage/add': NewsAdd,
    '/news-manage/draft': NewsDraft,
    '/news-manage/category': NewsCategory,
    '/news-manage/preview/:id': NewsPreview,
    '/news-manage/update/:id': NewsUpdate,
    '/audit-manage/audit': Audit,
    '/audit-manage/list': AuditList,
    '/publish-manage/unpublished': Unpublished,
    '/publish-manage/published': Published,
    '/publish-manage/sunset': Sunset
}


const NewsRouter = (props) => {
    const [backRouteList, setbackRouteList] = useState([])
    useEffect(() => {
        Promise.all([
            axios.get(`/rights`),
            axios.get(`/children`)
        ]).then((res) => {
            setbackRouteList([...res[0].data, ...res[1].data])
        })
    }, [])

    const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
    // 判断后端pagepermisson是否存在
    const checkRoute = (item) => {
        return LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
    }
    // 判断当前登录的用户是否有这个权限
    const checkUserPermisson = (item) => {
        return rights.includes(item.key)
    }

    return (
        <div>
            <Spin size="large" spinning={props.isLoading}>
                <Switch>
                    {
                        backRouteList.map((item) => {
                            if (checkRoute(item) && checkUserPermisson(item)) {
                                return <Route
                                    path={item.key}
                                    key={item.key}
                                    component={LocalRouterMap[item.key]}
                                    exact
                                />
                            }
                            return null
                        })
                    }
                    <Redirect from="/" to="/home" exact />
                    {
                        backRouteList.length > 0 && <Route path="*" component={NoPermission} />
                    }
                </Switch>
            </Spin>
        </div>
    )
}

const mapStateToProps = ({ LoadingReducers: { isLoading } }) => {
    return {
        isLoading
    }
}

export default connect(mapStateToProps)(NewsRouter) 